<template>
  <div class="UserDetail">
    <h1>UserDetail</h1>

    <button @click="toUser">to user</button>
    <hr>
    <h2>{{ store.state.counter }}</h2>
    <h3>{{ store.getters.counterFixed }}</h3>
    <button @click="store.commit('SET_COUNTER', 3)">counter+=3</button>
    <button @click="store.dispatch('updateCounter', 10)">counter+=10</button>
    <hr>
    <h2>{{ counter }}</h2>
  </div>
</template>

<script>
import { toRefs } from "vue"
import { useRoute, useRouter } from "vue-router"
import { useStore } from "vuex"

export default {
  name: "UserDetail",
  setup() {
    const route = useRoute()
    const router = useRouter()
    // this.$route.params.user_id
    // console.log(route.params.user_id)

    const store = useStore()
    // const { counter } = store.state
    const { counter } = toRefs(store.state)
    console.log(store)

    const toUser = () => {
      router.push({
        name: "mobile-user",
        query: {
          from: "user-detail"
        }
      })
    }

    return {
      toUser,
      store,
      counter
    }
  }
}
</script>
